<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>需求管理</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
	<meta http-equiv="Cache-Control" content="no-siteapp"/>

<!--	<script th:src="@{static/test/layui/layui.js}" charset="utf-8"></script>-->
	<link rel="stylesheet" href="/test/layui/css/layui.css">

	<style>
		.layui-input-block {
			margin-left: 62px;
		}
		.layui-table-tool{
			background-color: rgb(199 189 189 / 23%);
		}
	</style>
</head>
<body>
<div class="layui-container" style="margin-top: 1.5%">
	<form class="layui-form" action="" id="addDemandForm">
		<div class="layui-row">
			<div class="layui-col-md3" style="width: 24%">
				<label class="layui-form-label" style="width: 35px;padding: 9px 13px;">项目:</label>
				<div class="layui-input-block">
					<select name="projectName" lay-search="">
						<option value="">直接选择或搜索选择</option>
						<option th:each="list:${listProject}" th:value="${list.getProjectName()}"
								th:text="${list.getProjectName()}"></option>
					</select>
					<!---->
				</div>
			</div>
			<div class="layui-col-md6" style="width: 42%;">
				<label class="layui-form-label" style="width: 60px">需求日期:</label>
				<div class="layui-inline" id="test6">
					<div class="layui-input-inline" style="float: left;">
						<input type="text" name="startTime" autocomplete="off" id="startTime" class="layui-input"

							   placeholder="开始日期">
					</div>
					<div class="layui-form-mid" style="margin: 0 10px;">-</div>
					<div class="layui-input-inline" style="float: left;">
						<input type="text" name="endTime" autocomplete="off" id="endTime" class="layui-input"
							   placeholder="结束日期">
					</div>
				</div>
			</div>
			<div class="layui-col-md2" style="width: 24%">
				<label class="layui-form-label" style="width: 32px">标签:</label>
				<div class="layui-input-block">
					<select name="labelOption" lay-search="">
						<option value="">直接选择或搜索选择</option>
						<option th:each="label:${labelList}" th:value="${label.getLabelName()}"
								th:text="${label.getLabelName()}"></option>
					</select>
					<!---->
				</div>
			</div>
			<div class="layui-col-md1">
				<div class="layui-input-block" style="margin-left: 10px">
					<button type="submit" style="width: 100%" class="layui-btn" lay-submit="" lay-filter="demo1"
							data-type="reload">
						<i class="layui-icon layui-icon-search"></i>搜索
					</button>
				</div>
			</div>
		</div>
	</form>
</div>
<div class="layui-fluid" style="margin-top: 20px">
	<div class="layui-row">
		<table class="layui-hide" id="table" lay-filter="table"></table>
	</div>
</div>
<script type="text/html" id="usernameTpl">
	<a href="/projectView/two?projectName={{d.project_name}}" id="test111" class="layui-table-link">{{ d.project_name
		}}</a>
</script>
<script src="/test/layui/layui.js" charset="utf-8"></script>
<script src="/test/js/jquery-3.5.1.js"></script>>
<script type="text/javascript" src="/test/index/js/indexContent.js"></script>
<script>
	layui.use(['form', "table", 'layer', 'util', 'laydate'], function () {
		var form = layui.form,
				layer = layui.layer,
				table = layui.table,
				util = layui.util,
				laydate = layui.laydate;
		//日期范围
		laydate.render({
			elem: '#test6',
			//设置开始日期、日期日期的 input 选择器
			//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
			range: ['#startTime', '#endTime'],
			max: maxDate(),
			theme: '#009688'
		});
		//固定块
		util.fixbar({
			css: {right: 50, bottom: 100}
			, bgcolor: '#393D49'
			, click: function (type) {
				console.log(type);
				if (type === 'top') {
					layer.msg('返回顶部')
				}
			}
		})

		// 设置最大可选的日期
		function maxDate() {
			var now = new Date();
			return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
		}

		layui.use('table', function () {
			var table = layui.table;
			table.render({
				elem: '#table'
				, url: '/projectView/getOneList'
				, method: 'GET'
				, title: '主页面第一页'
				, toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				text: {
					none: '暂无相关数据' //默认：无数据。
				}
				, limit: 15
				, limits: [15, 30, 45, 60, 75, 90]
				, loading: true //是否开始加载条
				, even: true, //开启隔行背景#
				skin: 'line', //行边框风格
				id: "testReload",
				cols:
						[
							[
								// {type: 'checkbox', fixed: 'left'},
								// {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true},
								{field: 'project_name', title: '项目名', templet: '#usernameTpl'},
								{field: 'project_info', title: '项目概述'},
								{field: 'sum_demand_time', title: '需求日期', sort: true},
								{field: 'sum_demand_label', title: '需求标签'},
								// {field: 'create_time', title: '创建时间', sort: true},
							]
						],
				page: true
			});
		})

		//监听提交
		form.on('submit(demo1)', function (data) {
			let form_data = data.field;
			if (form_data.projectName == '' && form_data.endTime == '' && form_data.startTime == ''
					&& form_data.labelOption == '') {
				layer.msg("至少选择一个搜索条件", {
					icon: 2,
					time: 2000
				});
			} else if (form_data.endTime != '' && form_data.startTime == '' ||
					form_data.endTime == '' && form_data.startTime != '') {
				layer.msg("请选择开始时间和结束时间", {
					icon: 2,
					time: 2000
				});
			} else {
				table.reload('testReload', {
					page: {
						curr: 1 //重新从第 1 页开始
					}
					, where: {
						startTime: form_data.startTime,
						endTime: form_data.endTime,
						labelOption: form_data.labelOption,
						projectName: form_data.projectName,
					}
				}, 'data');
				return false;
			}
			return false;
		});
	})
</script>

</body>
</html>